<template>
  <!-- <div v-resize="onResize">
    <BaseInfo ref="baseInfo" />
    <Card :bordered="false" dis-hover :padding="0" class="ivu-mb">
      <template #title>
        <Avatar icon="ios-clock-outline" size="small" v-color="'#faad14'" v-bg-color="'#fffbe6'" />
        <span class="ivu-pl-8">今日提醒</span>
      </template>
<todo />
</Card>
<Card :bordered="false" dis-hover class="dashboard-console-visit">
  <template #title>
        <Row type="flex" justify="center" align="middle">
          <Col span="8">
          <Avatar icon="ios-podium" size="small" v-color="'#1890ff'" v-bg-color="'#e6f7ff'" />
          <span class="ivu-pl-8">访问量</span>
          </Col>
          <Col span="16" class="ivu-text-right">
          <RadioGroup v-model="visitType" type="button" class="ivu-mr-8" @on-change="onChangeVisitType">
            <Radio label="day">今日</Radio>
            <Radio label="month">本月</Radio>
            <Radio label="year">全年</Radio>
          </RadioGroup>
          <DatePicker v-model="visitDate" type="daterange" placement="bottom-end" style="width: 200px"></DatePicker>
          </Col>
        </Row>
      </template>
  <VisitChart ref="visitChart" />
</Card>
</div> -->
  <div class="dashboard-container">
    <h2>无人机房动环监控平台欢迎您！</h2>
    <div class="card">
      <!-- <img src="https://pub-conf.oss-cn-shanghai.aliyuncs.com/admin-sparknt-cn/logo.png" alt=""> -->
    </div>
  </div>
</template>
<script>
import DayJs from 'dayjs';
// import BaseInfo from './base-info';
// import VisitChart from './visit-chart';
// import Todo from './todo';

export default {
  name: 'dashboard-console',
  components: {
    // BaseInfo,
    // Todo,
    // VisitChart
  },
  data() {
    return {
      visitType: 'month', // day, month, year
      visitDate: [(new Date(DayJs().startOf('month').format('YYYY-MM-DD'))), (new Date())]
    }
  },
  methods: {
    onChangeVisitType(val) {
      if (val === 'day') {
        this.visitDate = [(new Date()), (new Date())];
      } else if (val === 'month') {
        this.visitDate = [(new Date(DayJs().startOf('month').format('YYYY-MM-DD'))), (new Date())];
      } else if (val === 'year') {
        this.visitDate = [(new Date(DayJs().startOf('year').format('YYYY-MM-DD'))), (new Date())];
      }
    },
    // 监听页面宽度变化，刷新表格
    onResize() {
      this.$refs.baseInfo.handleResize();
      this.$refs.visitChart.handleResize();
    }
  }
}
</script>
<style lang="less">
.dashboard-console-visit {
  .ivu-radio-group-button .ivu-radio-wrapper {
    border: none !important;
    box-shadow: none !important;
    padding: 0 12px;
  }

  .ivu-radio-group-button .ivu-radio-wrapper:before,
  .ivu-radio-group-button .ivu-radio-wrapper:after {
    display: none;
  }
}

.dashboard-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 100px;

  h2 {
    font-size: 28px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 40px;

    span {
      font-size: 15px;
      color: #777;
      margin-left: 5px;
    }
  }

  .card {
    display: flex;
    justify-content: center;

    img {
      width: 40%;
    }
  }
}
</style>
